import React, { Component } from 'react'
import { Pagination } from "antd";
import '../../../../static/css/main.less'
import '../../../../static/css/article.less'
import { Form, Input, Button, Select, Checkbox } from 'antd';

const { Option } = Select;

function handleChange(value) {
    console.log(`selected ${value}`);
}

function onChange(e) {
    console.log(`checked = ${e.target.checked}`);
}

class ArticleList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { image: '#', type: '文章类型', author: '文章作者', info: '文章简介', date: '文章发布日期', no: '121' },
                { image: '#', type: '文章类型', author: '文章作者', info: '文章简介', date: '文章发布日期', no: '122' },
                { image: '#', type: '文章类型', author: '文章作者', info: '文章简介', date: '文章发布日期', no: '123' },
                { image: '#', type: '文章类型', author: '文章作者', info: '文章简介', date: '文章发布日期', no: '124' },
            ],
            currentPage: 1,
            total: 50,
            search: {
                filterStr: '',
                type: '12'
            }
        }
        this.goView = this.goView.bind(this)
    }
    componentDidMount() {
        document.title = '文章中心'
    }
    onfilterStrChange = filterStr => {
        console.log(filterStr)
        this.setState({
            search: {
                filterStr: filterStr
            }
        })
        console.log(this.state.search)
    }

    pageChange = page => {
        console.log(page)
        this.setState({
            currentPage: page
        })

    }
    goView(no) {
        var url1 = '/article/view/' + no
        var win = window.open(url1, '_blank')
        win.focus()
    }


    render() {
        var items = this.state.list
        return (
            <>
                <div className='content'>
                    <div className='filter'>
                        <Form>
                            <Form.Item
                                name="search"
                                label="搜索关键词"
                            // rules={[
                            //     {
                            //         validator: checkPrice,
                            //     },
                            // ]}
                            >
                                <span>
                                    <Input
                                        type="text"
                                        value={this.state.filterStr}
                                        onChange={this.onfilterStrChange}
                                        style={{
                                            width: 200,
                                        }}
                                    />
                                    <span>    </span>
                                    <Select
                                        mode="multiple"
                                        style={{ width: 300 }}
                                        placeholder="选择一个类型或主题"
                                        defaultValue={['china']}
                                        onChange={handleChange}
                                        optionLabelProp="label"
                                    >
                                        <Option value="china" label="China">
                                            <div className="demo-option-label-item">
                                                <span role="img" aria-label="China">
                                                    🇨🇳
                                                </span>
                                                China (中国)
                                            </div>
                                        </Option>
                                        <Option value="usa" label="USA">
                                            <div className="demo-option-label-item">
                                                <span role="img" aria-label="USA">
                                                    🇺🇸
                                                </span>
                                                USA (美国)
                                            </div>
                                        </Option>
                                        <Option value="japan" label="Japan">
                                            <div className="demo-option-label-item">
                                                <span role="img" aria-label="Japan">
                                                    🇯🇵
                                                </span>
                                                Japan (日本)
                                            </div>
                                        </Option>
                                        <Option value="korea" label="Korea">
                                            <div className="demo-option-label-item">
                                                <span role="img" aria-label="Korea">
                                                    🇰🇷
                                                </span>
                                                Korea (韩国)
                                            </div>
                                        </Option>
                                    </Select>

                                </span>
                            </Form.Item>
                            <Form.Item>
                                <Checkbox onChange={onChange}>按时间排序</Checkbox>
                                <Checkbox onChange={onChange}>按收藏数排序</Checkbox>
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    搜索
                                </Button>
                            </Form.Item>

                        </Form>
                    </div>
                    <div className='list'>
                        <ul>
                            {
                                items.map((items) =>
                                    <li className='articleItem' key={items.no} onClick={() => this.goView(items.no)}>
                                        <div className='itemImage'>
                                            <img src={items.image} alt='文章图片' />
                                        </div>
                                        <div className='itemInfo' >
                                            <p className='itemTitle'>{items.title}</p>
                                            <p className='itemType'>{items.author} | {items.type}</p>
                                            <div className='itemInfo2'>
                                                <p className='double-line'>{items.info}</p>
                                            </div>
                                            <p className='itemDate'>{items.date}</p>
                                        </div>
                                    </li>
                                )
                            }
                            {/*<li className='articleItem'>*/}
                            {/*    <div className='itemImage'>*/}
                            {/*        <img src='#' alt='文章图片' />*/}

                            {/*    </div>*/}
                            {/*    <div className='itemInfo'>*/}
                            {/*        <p className='itemTitle'>文章标题</p>*/}
                            {/*        <p className='itemType'>文章作者 | 文章类型</p>*/}
                            {/*        <div>*/}
                            {/*            <p className='itemInfo2'>文章简介</p>*/}
                            {/*        </div>*/}
                            {/*        <p className='itemDate'>文章发布日期</p>*/}
                            {/*    </div>*/}
                            {/*</li>*/}
                        </ul>
                    </div>
                    <div className='page'>
                        <Pagination current={this.state.currentPage} onChange={this.pageChange} total={this.state.total} />
                    </div>
                </div>


            </>
        )
    }
}


export default ArticleList
